<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--    禁止缩放-->
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" id="viewport" name="viewport">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>组织管理</title>

    <!-- Bootstrap -->
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<!--     <link href="./tpl/User/default/common/SGroup/uploadify/uploadify.css" rel="stylesheet"> -->
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <!-- <script src="./tpl/User/default/common/SGroup/uploadify/jquery.uploadify.min.js"></script> -->
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>
<style>
    .tree {
        padding: 19px;
        margin-bottom: 20px;
        box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05) inset;
        float: left;
        border: 1px solid rgb(214, 214, 214);
        background-color: rgb(255, 255, 255);
        min-height: 800px;
        border-radius: 15px;
        /*        margin-left: 6px;*/
        min-width: 250px;
    }
    
    .people-block {
        background-image: none ! important;
        border: 1px solid rgb(230, 231, 236) ! important;
        text-shadow: none ! important;
        padding: 4px 12px ! important;
        cursor: pointer ! important;
        display: inline-block ! important;
        overflow: visible ! important;
        border-radius: 4px ! important;
        background-color: rgb(244, 245, 249) ! important;
        color: rgb(34, 34, 34) ! important;
        font-size: 14px ! important;
        margin-bottom: 5px;
        margin-left: 3px;
    }
    
    .tree li {
        list-style-type: none;
        margin: 0;
        padding: 10px 5px 0 5px;
        position: relative
    }
    
    .tree li::before,
    .tree li::after {
        content: '';
        left: -20px;
        position: absolute;
        right: auto
    }
    
    .tree li::before {
        border-left: 1px solid #999;
        bottom: 50px;
        height: 100%;
        top: 0;
        width: 1px
    }
    
    .tree li::after {
        border-top: 1px solid #999;
        height: 20px;
        top: 25px;
        width: 25px
    }
    
    .tree li span {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border: 1px solid #999;
        border-radius: 5px;
        display: inline-block;
        padding: 3px 8px;
        text-decoration: none
    }
    
    .tree li.parent_li>span {
        cursor: pointer
    }
    
    .tree>ul>li::before,
    .tree>ul>li::after {
        border: 0
    }
    
    .tree li:last-child::before {
        height: 25px
    }
    
    .tree li.parent_li>span:hover,
    .tree li.parent_li>span:hover+ul li span {
        background: #eee;
        border: 1px solid #94a0b4;
        color: #000
    }
    
    .content {
        float: left;
        background-color: #FFF;
        border: 1px solid rgb(214, 214, 214);
        border-radius: 15px;
        min-height: 801px;
        /*        min-width: 750px;*/
        width: 72%;
        text-align: center;
    }
    
    body {
        background-color: #eef2f5;
        padding-top: 20px;
    }
    
    th {
        text-align: center;
    }
    
    form {
        background-color: rgb(255, 255, 255);
        padding: 5%;
        min-height: 800px;
        border-radius: 15px;
        border: 1px solid rgb(214, 214, 214);
    }
</style>

<div>
    <div class="container">
        <div class="row">
            <!--           组织架构-->
            <div class="col-lg-4">
                <div class="tree id-0">
                </div>
            </div>
            <!--            人员-->
            <div class="col-lg-7">
                <div class="content">
                    <table class="table table-hover">
                        <tr>
                            <th>姓名</th>
                            <th>手机</th>
                            <th>职位</th>
                            <th><span class="people-block add-people">添加</span></th>
                        </tr>
                    </table>
                </div>
                <div class="addPeople hidden">
                    <form action="" method="post">
                        <!-- <div class="form-group">
                            <label for="exampleInputFile">头像上传</label>
                            <div id="queue"></div>
                            <input id="file_upload" name="file_upload" type="file" multiple="true">
                            <p class="help-block">请上传真实头像</p>
                        </div> -->
                        <div class="form-group">
                            <label for="name">姓名(必填)</label>
                            <input type="text" class="form-control" name="name" id="name">
                        </div>
                        <div class="form-group">
                            <label for="">账号(必填)</label>
                            <input type="text" class="form-control" name="userid" placeholder="成员唯一标识，不可更改，不支持中文" id="userid">
                        </div>
                        <div class="form-group">
                            <label for="">性别</label>
                            <select name="gender" id="gender" class="form-control">
                                <option value="" selected="true" disabled="true">请选择性别</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="">职位</label>
                            <select name="position" id="position" class="form-control">
                                <option value="" selected="true" disabled="true">请选择职位</option>
                                <volist name="position" id="v">
                                <option value="{$key}">{$v}</option>
                                </volist>
                            </select>
                        </div>
                        <p>身份验证信息</p>
                        <div class="form-group">
                            <label for="">微信号</label>
                            <input type="text" class="form-control" placeholder="允许员工扫描的微信匹配关注" id="weixinid" name="weixinid">
                        </div>
                        <div class="form-group">
                            <label for="">手机</label>
                            <input type="tel" class="form-control" placeholder="允许手机对应的微信号与员工扫描的微信匹配关注" id="mobile" name="mobile">
                        </div>
                        <div class="form-group">
                            <label for="">邮箱</label>
                            <input type="text" class="form-control" placeholder="填写员工工作邮箱" id="email" name="email">
                        </div>
                        <div class="form-group">
                            <label for="">备注</label>
                            <input type="text" class="form-control" placeholder="填写备注" id="remark" name="remark">
                        </div>

                        <span class="btn btn-success peoplePost">提交</span>
                    </form>
                </div>
                <div class="updatePeople hidden">
                    <form action="" method="post">
                        <!-- <div class="form-group">
                            <label for="exampleInputFile">头像上传</label>
                            <div id="queue"></div>
                            <input id="file_upload" name="file_upload" type="file" multiple="true">
                            <p class="help-block">请上传真实头像</p>
                        </div> -->
                        <div class="form-group">
                            <label for="name">姓名(必填)</label>
                            <input type="text" class="form-control" name="name" id="name1">
                        </div>
                        <div class="form-group">
                            <label for="">账号(必填)</label>
                            <input type="text" class="form-control" name="userid" readonly="true" placeholder="成员唯一标识，不可更改，不支持中文" id="userid1">
                        </div>
                        <div class="form-group">
                            <label for="">性别</label>
                            <select name="gender" id="gender1" class="form-control">
                                <option value="" selected="true" disabled="true">请选择性别</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="">职位</label>
                            <select name="position" id="position1" class="form-control">
                                <option value="" selected="true" disabled="true">请选择职位</option>
                                <volist name="position" id="v">
                                    <option value="{$key}">{$v}</option>
                                </volist>
                            </select>
                        </div>
                        <div class="form-group" id="depart">
                            <label for="">部门</label>
                            <div class="radio-box">
                                <input value="1" type="radio" checked id="radio-1" name="isadd">
                                <label for="radio-1">修改</label>
                              </div>
                              <div class="radio-box">
                                <input value="2" type="radio" id="radio-2" name="isadd">
                                <label for="radio-2">新增</label>
                              </div>
                        </div>
                        <p>身份验证信息</p>
                        <div class="form-group">
                            <label for="">微信号</label>
                            <input type="text" class="form-control" placeholder="允许员工扫描的微信匹配关注" id="weixinid1" name="weixinid">
                        </div>
                        <div class="form-group">
                            <label for="">手机</label>
                            <input type="tel" class="form-control" placeholder="允许手机对应的微信号与员工扫描的微信匹配关注" id="mobile1" name="mobile">
                        </div>
                        <div class="form-group">
                            <label for="">邮箱</label>
                            <input type="text" class="form-control" placeholder="填写员工工作邮箱" id="email1" name="email">
                        </div>
                        <div class="form-group">
                            <label for="">备注</label>
                            <input type="text" class="form-control" placeholder="填写备注" id="remark1" name="remark1">
                        </div>

                        <span class="btn btn-success updatePost">提交</span>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="Tpl/Admin/common/wechat/addPeople.js"></script>
    <script type="text/javascript" src="Public/js/getUrl.js"></script>
    <script type="text/javascript" src="Tpl/Admin/common/wechat/SGroup.js"></script>
    <script type="text/javascript" src="Tpl/Admin/common/wechat/liandong.js"></script>
  
    <script>
        var people = {
            userid: "", //账号
            name: "", //姓名
            department: "", //部门
            position: "", //职位
            mobile: "", //手机
            gender: "", //性别
            email: "", //邮箱
            weixinid: "", //微信号
            avatar_mediaid: "", //头像
        }

        // //上传控件
        //  <?php $timestamp = time();?>
        // $(function () {
        //     $('#file_upload').uploadify({
        //         'formData': {
        //             'timestamp':'<?php echo $timestamp;?>',
        //             'token': '<?php echo md5('unique_salt' . $timestamp);?>'
        //         },
        //         'swf': './tpl/User/default/common/SGroup/uploadify/uploadify.swf',
        //         'uploader': './tpl/User/default/common/SGroup/uploadify/uploadify.php',
        //         'onUploadSuccess': function(file, data, response) {
        //             people.avatar_mediaid=data;
        //             console.log(data);
        //         }
        //     });
        // });
        
    </script>

</body>

</html>